<template>
  <div ref="cartag" class="tag">
    <div class="container">
      <div>车牌号</div>
      <div>{{ car.num }}</div>
    </div>
    <div class="container">
      <div>司机</div>
      <div>{{ car.driverName }}</div>
    </div>
    <div class="container">
      <div>车型</div>
      <div>{{ car.carType }}</div>
    </div>
    <div class="container">
      <div>状态</div>
      <div v-if="car.state == '正常'" style="color: #00ff00">
        {{ car.state }}
      </div>
      <div v-if="car.state == '异常'" style="color: #ffff00">
        {{ car.state }}
      </div>
    </div>
  </div>
</template>
<script setup>
import * as THREE from "three";
import { onMounted, ref, watch } from "vue";
import { createCarTween, createCarTweenFan } from "./createTween.js"; //车辆和标签对应动画
import { CSS3DSprite } from "three/examples/jsm/renderers/CSS3DRenderer.js";
const props = defineProps({
  model: { type: Object, required: true },
  car: { type: Object, required: true },
});

const cartag = ref(null); //标签DOM引用

const tag = (size) => {
  const div = cartag.value;
  // console.log(div);

  div.style.display = "block"; //HTML标签代码中设置了display:none;，这里改为'block'
  const label = new CSS3DSprite(div);
  const w = div.offsetWidth; //获取标签HTML元素宽度
  label.scale.set(size / w, size / w, size / w); //缩放CSS3DObject模型对象
  div.style.pointerEvents = "none"; //避免HTML标签遮挡三维场景的鼠标事件
  return label; //返回CSS3模型标签
};

onMounted(() => {
  console.log(props.car);

  let label = tag(5); //创建CSS3D标签模型
  // console.log(label);
  if (props.car.order <= 4) {
    //车绑定进站出站动画和对应标签淡入淡出动画
    createCarTween(props.car, cartag.value);
  } else {
    props.car.rotateY(Math.PI); //对向车道车辆绕着y轴旋转180度调头
    createCarTweenFan(props.car, cartag.value);
  }

  props.car.add(label); //把标签模型添加到车辆模型对象上
  const road = props.model.getObjectByName("CD0" + props.car.order); //车道中间线上的一个模型对象
  const pos = new THREE.Vector3();
  road.getWorldPosition(pos);
  props.car.position.x = pos.x; // 把车辆放置在车道中线
  props.car.position.z = 40;
  // 计算档杆包围盒，通过包围盒计算出来档杆包围盒集中中心坐标
  const box3 = new THREE.Box3();
  box3.expandByObject(props.car);
  const size = new THREE.Vector3();
  box3.getSize(size);
  // label.position.set(0, size.y, 0); // 保证X=0，Y在车顶，Z=0
  props.model.add(props.car);

  // console.log("size.y", size.y);

  if (props.car.order <= 4) {
    //调整标签相对车的坐标
    // size.y：坐标原点在车底，需要根据车高度调节
    // +2：标签有一定尺寸，也要考虑
    label.position.y += size.y + 2;
  } else {
    label.position.y += size.y + 3;
  }

  // 定时器测试车辆进进站动画
  setTimeout(function () {
    props.car.stop.start();
  }, 1000);

  // 出站动画
  setTimeout(function () {
    const danggan = props.model.getObjectByName("GZ00" + props.car.order);
    danggan.open.start(); //杆打开
    // 杆打开完毕，车启动开走
    danggan.open.onComplete(function () {});
    setTimeout(function () {
      props.car.run.start(); //车开走
    }, 2000);

    setTimeout(function () {
      // 车开走一定距离，关闭档杆
      danggan.close.start();
    }, 6000);

    // 车离开动画介绍
    props.car.run.onComplete(function () {
      // 车开走，不渲染标签
      // label.visible = false;
      // 车辆从场景中移除
      props.model.remove(props.car);
    });
  }, 6000);
});
</script>
<style>
.tag {
  opacity: 0;

  background-image: url(../../../../assets/车信息背景3.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 16px;

  z-index: 20;
  padding: 20px 30px;
  padding-bottom: 80px;
}

.container {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.container div {
  padding: 6px 0px;
  width: 120px;
}
</style>
